<template>
	<div class="css-text">
		<h2>弹性布局类</h2>
		<div class="fo-Gray mt10">一些弹性布局相关的css类封装</div>

		<h4 class="mt40">常规</h4>
		<codeBox :list='list1'></codeBox>
		
		<h4 class="mt40">对齐方式</h4>
		<codeBox :list='list2'></codeBox>
	</div>
</template>

<script>
	import codeBox from '@/views/components/codeBox.vue'
	export default {
		components:{
			codeBox
		},
		data() {
			return {
				list1: [
					{cssGroup: "display: flex;",class: "flex"},
					{cssGroup: "flex: 1;",class: "flex1"},
					{cssGroup: "flex-wrap: wrap;",class: "flex-wrap"},
					{cssGroup: "flex-wrap: nowrap;",class: "flex-nowrap"},
					{cssGroup: "flex-direction: column;",class: "flex-col"},
					{cssGroup: "flex-direction: row;",class: "flex-row"}
				],
				list2:[
					{cssGroup: "justify-content: flex-start;",class: "jus-sta"},
					{cssGroup: "justify-content: center;",class: "jus-cen"},
					{cssGroup: "justify-content: flex-end;",class: "jus-end"},
					{cssGroup: "justify-content: space-between;",class: "jus-spa-bet"},
					{cssGroup: "justify-content: space-around;",class: "jus-spa-aro"},
					{cssGroup: "align-items: flex-start;",class: "ali-sta"},
					{cssGroup: "align-items: flex-end;",class: "ali-cen"},
					{cssGroup: "align-items: center;",class: "ali-end"},
					{cssGroup: "align-self: flex-start;",class: "self-sta"},
					{cssGroup: "align-self: center;",class: "self-cen"},
					{cssGroup: "align-self: flex-end;",class: "self-end"},
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.codeBox {
		padding:10px 20px;
		width: 1000px;
		max-height: 300px;
		overflow: scroll;
		border-radius: 10px;
		color: skyblue;
		font-size: 14px;
		background: #2B2B2B;

		&::-webkit-scrollbar {
			width: 0px;
		}

		&::-webkit-scrollbar-thumb {
			background: skyblue;
			border-radius: 20px;
		}
	}
</style>
